<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <div class="welcome-banner">
          <h1>老师好，欢迎使用智慧英语系统</h1>
          <p>为教师提供便捷的英语教学管理工具，提升教学效率</p>
        </div>
      </el-col>
    </el-row>

    <div class="nav-container">
      <h2 class="nav-title">功能导航</h2>
      <div class="nav-grid">
        <div class="nav-item" @click="$router.push('/jiaowu/teacher')" v-hasPermi="['system:teacher:list']">
          <svg-icon icon-class="user" style="font-size: 32px; color: #1890ff; margin-bottom: 12px;"/>
          <span>教师管理</span>
        </div>
        <div class="nav-item" @click="$router.push('/jiaowu/class')">
          <svg-icon icon-class="tree" style="font-size: 32px; color: #1890ff; margin-bottom: 12px;"/>
          <span>班级列表</span>
        </div>
        <div class="nav-item" @click="$router.push('/jiaowu/student')">
          <svg-icon icon-class="people" style="font-size: 32px; color: #1890ff; margin-bottom: 12px;"/>
          <span>学员管理</span>
        </div>
        <div class="nav-item" @click="$router.push('/jiaowu/student-record')">
          <svg-icon icon-class="documentation" style="font-size: 32px; color: #1890ff; margin-bottom: 12px;"/>
          <span>学员记录</span>
        </div>
        <div class="nav-item" @click="$router.push('/jiaocai/course')">
          <svg-icon icon-class="education" style="font-size: 32px; color: #1890ff; margin-bottom: 12px;"/>
          <span>课程管理</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      // 移除未使用的数据
    }
  },
  created() {
    this.getStats()
  },
  methods: {
    getStats() {
      // TODO: 从后端API获取统计数据
      // this.courseCount = response.data.courseCount
      // this.teacherCount = response.data.teacherCount
      // this.classCount = response.data.classCount
      // this.studyCount = response.data.studyCount
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  background-color: #f0f2f5;
  height: 100vh;

  .welcome-banner {
    text-align: center;
    padding: 40px 0;
    background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
    border-radius: 4px;
    color: white;
    margin-bottom: 20px;

    h1 {
      font-size: 28px;
      margin-bottom: 10px;
    }

    p {
      font-size: 16px;
      opacity: 0.8;
    }
  }

  .mt-20 {
    margin-top: 20px;
  }

  .nav-container {
    padding: 0px 20px 40px 20px;

    .nav-title {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
      font-size: 24px;
      font-weight: 500;
      color: #1d1d1f;
      margin-bottom: 24px;
      text-align: center;
      letter-spacing: -0.5px;
    }

    .nav-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: white;
      border-radius: 12px;
      padding: 24px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      i {
        font-size: 32px;
        color: #1890ff;
        margin-bottom: 12px;
      }

      span {
        font-size: 16px;
        color: #333;
        font-weight: 500;
      }
    }
  }
}
</style>

